<!DOCTYPE html>
<html>
    <head>
        <title>Charcounter</title>
        <meta charset="UTF-8" />
        <link href="./main.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <div class="hero">
                <header>
                    <h1>Charcounter</h1>
                </header>
                <h3>Chars: <span id="count">0</span></h3>
                <textarea id="text" rows="20" cols="100"></textarea>
                <script>
                    setInterval(() => {
                        document.getElementById("count").innerText = document.getElementById("text").value.toString().length;
                    }, 100);
                </script>
            </div>
        </div>
    </body>
</html>
